<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" :is-back="true" title="团队管理"></my-header>

		<view class="main-head mar-bot-10">
			<u-sticky>
				<!-- 只能有一个根元素 -->
				<u-search placeholder="人员搜索" v-model="keyword" :show-action="false" height="50"></u-search>
				<u-gap height="2" bg-color="#bbb" margin-top="20" margin-bottom="20"></u-gap>
			</u-sticky>
			<view class="dis_flex jus-con text-align" >
				<view>
					<view class="dis_flex ali-ite jus-cen">
						<view>
							<view class="pad-bot-5">53</view>
						</view>
					</view>
					<view>
						<text style="margin-left:3px;">全部</text>
					</view>
				</view>
				<view>
					<view class="dis_flex ali-ite jus-cen">
						<view>
							<view class="pad-bot-5">11</view>
						</view>
					</view>
					<view>
						<text style="margin-left:3px;">乐山</text>
					</view>
				</view>
				<view>
					<view class="dis_flex ali-ite jus-cen">
						<view>
							<view class="pad-bot-5">11</view>
						</view>
					</view>
					<view>
						<text style="margin-left:3px;">眉山</text>
					</view>
				</view>
				<view>
					<view class="dis_flex ali-ite jus-cen">
						<view>
							<view class="pad-bot-5">6</view>
						</view>
					</view>
					<view>
						<text style="margin-left:3px;">海口</text>
					</view>
				</view>
				<view>
					<view class="dis_flex ali-ite jus-cen">
						<view>
							<view class="pad-bot-5">3</view>
						</view>
					</view>
					<view>
						<text style="margin-left:3px;">小怪线充</text>
					</view>
				</view>
				<view>
					<view class="dis_flex ali-ite jus-cen">
						<view>
							<view class="pad-bot-5">5</view>
						</view>
					</view>
					<view>
						<text style="margin-left:3px;">桩柜产销</text>
					</view>
				</view>
			</view>
		</view>

		<view @click="click" class="main-body-e mar-top-5">
			<view class="dis_flex">
				<view class="mar-rig-15">
					<u-image width="140rpx" height="140rpx" border-radius="120" src="https://oaxiaochengxu.0871.cn/1.jpg">
					</u-image>
				</view>
				<view style="width:100%;">
					<view class="mar-top-3">
						<span>XXX酒店</span>
					</view>
					<view class="mar-top-3">
						<span>责任BD：</span>
						<span>XXX</span>
					</view>
					<view class="mar-top-3">
						<span>所属市场：</span>
						<span>乐山</span>
					</view>
					<view class="mar-top-3 dis_flex jus-con ali-ite">
						<view>
							<span>签约时间：</span>
							<span>2021-08-09</span>
						</view>
						<view class="main-body-right">
							<view>距到期剩：89天</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main-body-e-bot dis_flex mar-top-10">
				<u-tag text="租金商户" type="success" size="mini" />
				<u-tag text="高效门店" type="error" size="mini" class="mar-lef-10" />
				<u-tag text="无押金" type="success" size="mini" class="mar-lef-10" />
			</view>
		</view>

		<view @click="click" class="main-body-e mar-top-5">
			<view class="dis_flex">
				<view class="mar-rig-15">
					<u-image width="140rpx" height="140rpx" border-radius="120" src="https://oaxiaochengxu.0871.cn/2.jpg">
					</u-image>
				</view>
				<view style="width:100%;">
					<view class="mar-top-3">
						<span>XXX商业广场</span>
					</view>
					<view class="mar-top-3">
						<span>责任BD：</span>
						<span>XXX</span>
					</view>
					<view class="mar-top-3">
						<span>所属市场：</span>
						<span>乐山</span>
					</view>
					<view class="mar-top-3 dis_flex jus-con ali-ite">
						<view>
							<span>签约时间：</span>
							<span>2021-08-09</span>
						</view>
						<view class="main-body-right-red">
							<view>距到期剩：60天</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main-body-e-bot dis_flex mar-top-10">
				<u-tag text="分成商户" type="success" size="mini" />
				<u-tag text="高效门店" type="error" size="mini" class="mar-lef-10" />
				<u-tag text="押金" type="success" size="mini" class="mar-lef-10" />
			</view>
		</view>

		<view @click="click" class="main-body-e mar-top-5">
			<view class="dis_flex">
				<view class="mar-rig-15">
					<u-image width="140rpx" height="140rpx" border-radius="120" src="https://oaxiaochengxu.0871.cn/3.jpg">
					</u-image>
				</view>
				<view style="width:100%;">
					<view class="mar-top-3">
						<span>XXX养生会所</span>
					</view>
					<view class="mar-top-3">
						<span>责任BD：</span>
						<span>XXX</span>
					</view>
					<view class="mar-top-3">
						<span>所属市场：</span>
						<span>乐山</span>
					</view>
					<view class="mar-top-3 dis_flex jus-con ali-ite">
						<view>
							<span>签约时间：</span>
							<span>2021-08-09</span>
						</view>
						<view class="main-body-right-red">
							<view>距到期剩：35天</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main-body-e-bot dis_flex mar-top-10">
				<u-tag text="预付分成商户" type="success" size="mini" />
				<u-tag text="低效门店" type="error" size="mini" class="mar-lef-10" />
				<u-tag text="无押金" type="success" size="mini" class="mar-lef-10" />
				<u-tag text="无协议" type="error" size="mini" class="mar-lef-10" />
			</view>
		</view>

	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	import myFooter from '@/components/workbench/footer.vue';
	export default {
		data() {
			return {
				userList: '',
				tagList: '',
				keyword: '',
				background: {
					backgroundColor: ' ',
				},
			}
		},
		components: {
			myHeader,
		},
		onLoad() {
		},
		methods: {
			//人员点击事件
			click() {
				this.navigateTo('/pages/partner/details');
			},
		},
	}
</script>

<style>
	.main-body-right{
		padding:2px 5px;
		border:1px solid rgba(0, 81, 186, 1);
		color:rgba(0, 81, 186, 1);
		border-radius: 8px;
	}
	.main-body-right-red{
		padding:2px 5px;
		border:1px solid red;
		color:red;
		border-radius: 8px;
	}
	.main-body-e-bot{
		padding:5px;
		background:#ECE9E9;
		border-radius: 8px;
	}
	.main-head {
		width: 100%;
		background-color: #FFFFFF;
		padding: 24rpx;
		border-radius: 8px;
	}

	.main {
		padding: 10px;
		position: relative;
		min-height: 100vh;
		background-image: linear-gradient(#005687, #E4E4E5);
	}

	page {
		height: 100%;
	}
</style>
